<template>
    <div class="sureprice">
        <homeHeader></homeHeader>
        <div class="surepricebody">
            <div class="changenav" @click="changenav">
                <p id="1" :class="showChangeNav == 1 ? 'act' : ''">接机</p><p id="2" :class="showChangeNav == 2 ? 'act' : ''">送机</p>
            </div>
            <div class="outstime" @click="getGotime">{{nowtimes|datafmt('YYYY-MM-DD HH:MM:SS')}}</div>
            <div class="whereupcars" @click="getAdressstep(2)"><abbr></abbr><input type="text" class="upcarsw" v-model="upAddress" placeholder="您在哪里上车"></div>
            <div class="wheredowncars"  @click="getAdressstep(3)"><abbr></abbr><input type="text" class="upcarsw" v-model="downAddress" placeholder="您在哪里下车"></div>
            <div class="whereupcars mar"><p style="margin-right: 5px;border-right: 1px solid #e1e1e1;"><button class="changeBtnStyle" @click="showPickerPerson">{{PersonNumb}}人</button></p><p><button class="changeBtnStyle" @click="showPicker">{{carTypesinfo}}</button></p></div>
            <div class="isselfinput"><input type="text" v-model="contentBody" class="isselfs" readonly="readonly"><span>为他人叫车></span></div>
            <button type="button" class="yuechebtn">确认约车</button>
        </div>
        <timeInfo v-if="showTimeInfo"></timeInfo>
        <div class="zhezhaos" v-if="isshow"></div>
        <div class="someoneCall" v-if="isshowCon">
           <div class="tipHeader"><p style="width: 20%;">取消</p><p style="width: 60%;font-size: 18px;">联系人</p><p style="width: 20%;">确定</p></div>
           <div class="fromDatas">
               <input type="text" placeholder="请输入姓名 如 张三" v-model="phoneName">
               <input type="text" placeholder="请输入联系电话" v-model="phoneNum">
           </div>
        </div>
    </div>
</template>
<script>
    import axios from 'axios'
    import homeHeader from 'base/home-header/home-header'
    import timeInfo from 'base/flight-info/flight-info'
    import {mapMutations, mapGetters} from 'vuex'
    import { getFlightPrice, getCarType } from 'api/api'
    export default {
      data () {
        return {
          locations: '武汉天河国际机场',
          gotime: '',
          PersonNumb: '1',
          carTypesinfo: '七座商务',
          col1Data: [{ text: '1人', value: '1'}, {text: '2人', value: '2' }, { text: '3人', value: '3' }, { text: '4人', value: '4' }, { text: '5人', value: '5' }, { text: '6人', value: '6' }],
          colDatalist: [],
          isshow: false,
          isshowCon: false,
          contentBody: '本人',
          phoneNum: '',
          phoneName: ''
        }
      },
      computed: {
        ...mapGetters([
          'showChangeNav',
          'showTimeInfo',
          'nowtimes',
          'upAddress',
          'downAddress'
        ])
      },
      mounted () {
        this.iswhatNav()
        this.setWhatNav()
      },
      methods: {
         // 选择车型
         showPicker () {
           let _this = this
           axios.get(getCarType).then((res) => {
             let datas = []
             res.data.result.forEach(item => {
               let arrdata = {
                  text:item.carType,
                  value:item.carLevel
               }
               datas.push(arrdata)
             })
             this.colDatalist = datas
             _this.pickSHOW1()
             _this.picker.show()
           })
        },
        showPickerPerson () {
           this.pickSHOW()
           this.picker.show()
        },
        pickSHOW () {
          this.picker = this.$createPicker({
            title: '请选择人数',
            data: [this.col1Data],
            onSelect: (selectedVal, selectedIndex, selectedText) => {
               this.PersonNumb = selectedVal[0]
            },
            onCancel: (error) => {
              console.log(error)
            }
          })
        },
        pickSHOW1 () {
          this.picker = this.$createPicker({
            title: '请选择人数',
            data: [this.colDatalist],
            onSelect: (selectedVal, selectedIndex, selectedText) => {
              this.carTypesinfo = selectedText[0]
              console.log(selectedText)
            },
            onCancel: (error) => {
              console.log(error)
            }
          })
        },
        getAdressstep (el) {
          localStorage.setItem('parmastype', el)
          if(el == 2){
            if (localStorage.getItem('anthorpickType') == 1) {
              return false
            }else{
              this.$router.push({name: 'whereUps', params: {types: 2} })
            }
          }
          if(el == 3) {
            if (localStorage.getItem('anthorpickType') == 2) {
              return false
            }else{
              this.$router.push({name: 'whereUps', params: {types: 3} })
            }
          }
        },
        getGotime () {
           this.setShowTimeInfo(true)
        },
        setWhatNav () {
          const nowtimes = Date.parse(new Date())
          localStorage.setItem('anthorpickType', 1)
          localStorage.setItem('nowtimes', nowtimes)
          this.curtimes = localStorage.getItem('nowtimes')
        },
        iswhatNav () {
          if (this.showChangeNav == 1) {
            this.setUpAddress(this.locations)
            this.setDownAddress('')
            localStorage.setItem('lat1', '30.773671')
            localStorage.setItem('lng1', '114.221126')
          }
          if (this.showChangeNav == 2) {
            this.setUpAddress('')
            this.setDownAddress(this.locations)
            localStorage.setItem('lat2', '30.773671')
            localStorage.setItem('lng2', '114.221126')
          }
        },
        changeShowBar () {
          this.setShowBar(true)
        },
        changenav (e) {
          this.setShowChangeNav(e.target.id)
          localStorage.setItem('anthorpickType', e.target.id)
          if (this.showChangeNav == 1) {
            this.setUpAddress(this.locations)
            this.setDownAddress('')
            localStorage.setItem('lat1', '30.773671')
            localStorage.setItem('lng1', '114.221126')
          }
          if (this.showChangeNav == 2) {
            this.setUpAddress('')
            this.setDownAddress(this.locations)
            localStorage.setItem('lat2', '30.773671')
            localStorage.setItem('lng2', '114.221126')
          }
        },
        ...mapMutations({
          setShowBar: 'SET_SHOWBAR',
          setShowChangeNav: 'SET_SHOWCHANGENAV',
          setShowTimeInfo: 'SET_SHOWTIMEINFO',
          setNowtimes: 'SET_NOWTIMES',
          setUpAddress: 'SET_UPADDRESS',
          setDownAddress: 'SET_DOWNADDRESS'
        })
      },
      components: {
        homeHeader,
        timeInfo
      }
    }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
  .fromDatas {
    width:100%;
    overflow-x: hidden;
    overflow-y: auto;
    height: 200px;
  }
  .fromDatas input {
      width:92%;
      height:40px;
      line-height:40px;
      padding:0;
      background: #e1e1e1;
      margin-top:12px;
      border:1px solid #e2e2e2;
      padding-left: 6px;
      font-size: 14px;
      outline:none;
      border-radius: 3px;
  }
  .tipHeader {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ccc;
  }
  .tipHeader p{
    float: left;
    font-size: 14px;
    font-family: '微软雅黑';
  }
  .someoneCall {
    position: absolute;
    z-index: 4;
    left:0;
    bottom:0;
    width:100%;
    height: 215px;
    margin:0;
    background: #fff;
  }
  html,body{
      width:100%;
      height:100%;
  }
  .yuechebtn {
      width:90%;
      margin:35px auto 0 auto;
      height: 40px;
      line-height:30px;
      padding:none;
      box-sizing: border-box;
      border:none;
      font-family: '微软雅黑';
      font-size: 14px;
      border-radius: 3px;
      background: #e1e1e1;
      color: #000;
  }
  .sureprice {
      height: 100vh;
      width: 100%;
      position: relative;
  }
  .surepricebody{
      margin-top: 50px;
      overflow: hidden;
      height:100%;
  }
  .changenav{
      width:100%;
      padding:5px;
      box-sizing: border-box;
      text-align: center;
      overflow: hidden;
  }
  .changenav p{
      display:inline-block;
      width:30%;
      height: 35px;
      line-height: 35px;
      text-align: center;
      font-size: 14px;
      background: #e1e1e1;
      border:1px solid #e1e1e1;
      border-radius: 2px 0 0 2px;
      box-sizing: border-box;
      cursor: pointer;
  }
  .changenav p.act {
      border:1px solid #e1e1e1;
      box-sizing: border-box;
      background: #fff;
  }
  .outstime {
      width:96%;
      margin-left: 2%;
      font-size: 14px;
      padding:10px 0 12px 0;
      text-align: center;
      box-sizing: border-box;
      border-bottom: 1px solid #e1e1e1;
  }
  .outstime span{
      color: #000;
  }
  .whereupcars {
      position: relative;
      width:96%;
      margin-left: 2%;
      font-size: 14px;
      padding:10px 0 10px 0;
      text-align: center;
      box-sizing: border-box;
      border-bottom: 1px solid #e1e1e1;
  }
  .isselfinput span{
      display: block;
      width:24%;
      height:38px;
      line-height: 38px;
      float: left;
  }
  .whereupcars abbr{
      position: absolute;
      width:10px;
      height:10px;
      left:8px;
      top:17px;
      border-radius: 50%;
      background: red;
      display: block;
  }
  .isselfinput {
      position: relative;
      width:96%;
      margin-left: 2%;
      font-size: 14px;
      height: 45px;
      text-align: center;
      padding-top: 3px;
      box-sizing: border-box;
      border-bottom: 1px solid #e1e1e1;
  }
  .upcarsw {
      width:80%;
      height:25px;
      line-height: 25px;
  }
  .wheredowncars {
      position: relative;
      width:96%;
      margin-left: 2%;
      font-size: 14px;
      padding:10px 0 10px 0;
      text-align: center;
      box-sizing: border-box;
      border-bottom: 1px solid #e1e1e1;
  }
  .wheredowncars abbr{
      position: absolute;
      width:10px;
      height:10px;
      left:8px;
      top:17px;
      border-radius: 50%;
      background: #333;
      display: block;
  }
  .changeBtnStyle {
      background: #fff;
      color: #000;
      text-align: left;
      font-size: 14px;
      padding: 10px 0;
      width:100%;
      border:none;
      outline: none;
  }

  .changeBtnStyle:after{
      border:none;
  }
  .whereupcars p{
      width:42%;
      display: inline-block;
      cursor: pointer;
  }
  .whereupcars button{
      cursor: pointer;
  }
  .whereupcars .changeBtnStyle:after{
      background: #fff;
      border:none;
      box-shadow: none;
      outline: none;
      color: #000;
      content:''
  }
  .mar{
      padding:5px 0;
  }
  .isselfs {
      width:66%;
      float: left;
      height:38px;
      line-height:38px;
      margin-left: 26px;
  }
  .zhezhaos {
      position: absolute;
      left:0;
      top:0;
      z-index: 3;
      width:100%;
      height:100vh;
      background: rgba(0,0,0,0.4);
  }
</style>